import { useEditor } from "@craftjs/core";
import { Space, Button, Modal } from "antd";
import { useState } from "react";

export const Toolbar = () => {
  const [modalOpen, setModalOpen] = useState(false);
  const [jsonString, setJsonString] = useState("{}");
  const { query } = useEditor();

  const onLookJson = () => {
    setJsonString(query.serialize());
    setModalOpen(true);
  };

  return (
    <>
      <Space>
        <Button type="primary" onClick={onLookJson}>
          查看JSON
        </Button>
      </Space>

      <Modal
        title="JSON"
        open={modalOpen}
        bodyProps={{ style: { maxHeight: "70vh", overflowY: "auto" } }}
        onCancel={() => {
          setModalOpen(false);
        }}
      >
        <pre>{JSON.stringify(JSON.parse(jsonString), null, 2)}</pre>
      </Modal>
    </>
  );
};
